<template>
  <div class="wp">
      <p class="phonerighttop">
        {{txts}}
        <button @click="toadd()" class="Abut">添加新地址</button>
    </p>
    <div class="phonemain">
        <Addresnull v-if="nulls" @tonew-1="toadd()"/>
        <Management  v-if="mage"/>
        <Addaddress v-if="add"/>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Addresnull from './Addresnull';
import Management from './Management';
import Addaddress from './Addaddress';

export default {
    name:'Address',
    data(){
        return{
            nulls:false,
            mage:false,
            add:false,
            txt:['地址管理','添加新地址'],
            txts:''
        }
    },
    components:{
        Addresnull,
        Management,
        Addaddress,
    },
    methods:{
       toadd(){
           this.add = true;
           this.nulls = false;
           this.mage = false;
           this.txts = this.txt[1];
       }
    },
    mounted() {
         axios({
                method:'get',
                url:'/api/small/user/verify/v1/receiveAddressList',
                headers:{
                    userId:this.$store.state.obj[0].userId,
                    sessionId:this.$store.state.obj[0].sessionId
                }
            }).then(res=>{
                // console.log(res.data);
                if (res.data==[]) {
                    this.nulls = true;
                }else{
                    this.mage = true
                }
            });
            this.txts = this.txt[0];
    },
}
</script>

<style  scoped>
.wp {
    width: 1083px;
    height: 623px;
    position: relative;
}
.phonerighttop {
    height: 56px;
    border-bottom: 1px solid #e7e7e7;
    line-height: 56px;
    text-align: left;
    padding-left: 20px;
    color: #323333;
    font-size: 18px;
}
/* 内容 */
.phonemain {
    display: flex;
    flex-direction: column;
    position: relative;
}
/* 查看账单 */
.Abut {
    background: #498e3d;
    color: #fff;
    font-size: 14px;
    height: 30px;
    width: 90px;
    border-radius: 5px;
    position: absolute;
    top: 13px;
    right: 20px;
}
</style>